<template>
  <el-dialog title="选择收货地址" v-model="visible" width="800px" :close-on-click-modal="false" :close-on-press-escape="false" :show-close="false">
    <ul class="address_list">
      <li :class="{ active: addressData.selAddress === item.supplierShippingId }" v-for="item in addressData.list" :key="item.supplierShippingId">
        <el-radio v-model="addressData.selAddress" :label="item.supplierShippingId">
          <div class="text">
            {{ item.shippingProvince }}
            {{ item.shippingAddressDetail }}
            <span
              >收货人：{{ item.shippingPerson }}<span class="phone">{{ item.shippingMobile }}</span></span
            >
          </div>
        </el-radio>
      </li>
    </ul>
    <template #footer>
      <Button label="取消" @click="onCancelClick" />
      <Button type="primary" label="确认" @click="onSubmitClick" />
    </template>
  </el-dialog>
</template>

<script setup>
import { reactive, ref, computed, watch } from 'vue'
import { ElMessage } from 'element-plus'
import api from '@/api'
import Button from '@/components/button/button.vue'
const emit = defineEmits(['update:visible', 'change'])
const props = defineProps(['visible', 'supplierId'])

const visible = computed({
  get: () => {
    return props.visible
  },
  set: (value) => emit('update:visible', value)
})

watch(
  () => props.supplierId,
  (val) => {
    if (val) {
      addressData.supplierId = val
      loadData()
    }
  }
)

const addressData = reactive({
  list: [],
  supplierId: '',
  selAddress: ''
})

const loadData = async () => {
  let { data, err } = await api.get(`/medinstrument/boss/supplier/getSupplierDetail?supplierId=${addressData.supplierId}`)
  if (err) {
    ElMessage.error(err)
  } else {
    addressData.list = data.supplierVo.supplierShippingDetailList
    addressData.selAddress = addressData.list[0]?.supplierShippingId
  }
}

const onCancelClick = () => {
  visible.value = false
}

const onSubmitClick = () => {
  const selected = addressData.list.find((e) => e.supplierShippingId === addressData.selAddress)
  if (selected) {
    emit('change', selected)
  }
  visible.value = false
}
</script>

<style scoped lang="scss">
.address_list {
  padding: 0 30px;

  li {
    display: flex;
    align-items: center;
    height: 30px;
    border: 1px solid var(--border-color);
    margin-bottom: 10px;
    padding: 5px 20px;
    box-sizing: border-box;

    &.active {
      border: 1px solid #a3d0fd;
      background-color: #e6f1fc;
    }

    &:hover {
      border-color: #a3d0fd;
    }

    .text {
      height: 20px;
      line-height: 20px;
      color: var(--color-text);

      span {
        display: inline-block;
        margin-left: 20px;
      }
    }
  }
}
</style>
